<template>
  <button 
    class="fixed top-1 left-1 z-[9999] p-1 bg-blue-100 hover:bg-blue-300 text-white rounded-lg shadow-md transition-colors duration-200 opacity-80 hover:opacity-100"
    @click="$slidev.nav.go(4)"
  >
    返回目录
  </button>

<!-- fixed          // 固定定位，使元素固定在视口中的位置
top-1          // 距离顶部 0.25rem (4px)
left-1         // 距离左侧 0.25rem (4px)
z-[9999]       // z-index值为9999，确保按钮在最上层
p-2           // padding: 0.5rem (8px)
bg-blue-500   // 背景色为蓝色（500表示色调深度）
hover:bg-blue-600  // 鼠标悬停时背景色变深
text-white    // 文字颜色为白色
rounded-lg    // 圆角大小为 0.5rem (8px)
shadow-md     // 中等阴影效果
transition-colors  // 颜色变化时的过渡动画
duration-200  // 过渡动画持续时间为200ms
opacity-80    // 不透明度为80%
hover:opacity-100 // 鼠标悬停时不透明度为100% -->
</template>

<script setup>
import { inject } from 'vue'
const nav = inject('nav')
</script>

<style>
.fixed {
  position: fixed !important;
}
.nav-button {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 9999;
}
</style> 